<template>
  <div id="cart">
    <div class="provide">
      <div class="provide-cont">
        <div class="cont-detail">
          <span class="circle">□</span>30天无忧退货
        </div>
        <div class="cont-detail">
          <span class="circle">□</span>48小时快速退款
        </div>
        <div class="cont-detail">
          <span class="circle">□</span>满88元包邮费
        </div>
      </div>
    </div>

    <ul class="cart-list">
      <li class="good" v-for="item in list" :key="item.goods_id">
        <van-swipe-cell>
            <van-checkbox v-model="checked" class="checked">
                
          <van-card
            num="2"
            :price="item.retail_price"
            :title="item.goods_name"
            class="goods-card"
            :thumb="item.list_pic_url"
          />
            </van-checkbox>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </li>
    </ul>

    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" class="submit">
        <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { cartList } from "@/api/cart";
export default {
  data() {
    return {
      list: {},
      checked:false,
      allChecked:false,
    };
  },
  created() {
    cartList({
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      this.list = res.data;
    });
  },
  methods:{
      onSubmit(){

      }
  }
};
</script>

<style lang="scss" scoped>
#cart {
  width: 375px;
  height: calc(100% - 45px);
  background-color: rgb(244, 244, 244);
}
.provide {
  width: 375px;
  height: 45px;
  padding-top: 12px;
  .provide-cont {
    width: 359px;
    margin: 10px 8px 30px;
    display: flex;
    justify-content: space-between;
    .cont-detail {
      height: 12px;
      font-size: 12px;
      .circle {
        color: rgb(180, 40, 45);
      }
    }
  }
}

.cart-list{
    width: 375px;
    .good{
        width: 100%;
        background-color: rgb(250,250,250);
        margin: 8px 0;
        .checked{
            padding: 0 10px;
        }
        .goods-card{
            width: 200px !important;
        }
    }
}

.submit{
    margin-bottom: 50px;
}
</style>